<template>
  <div class="con">
    <!-- <Car :pics="pics" class="Car"></Car> -->
    <div class="car-run">
      <Carousel :imageList="banners"></Carousel>
    </div>
    <div class="aside">
      <div class="aside-top">
        <h4>
          <strong> 尚品汇快报 </strong>
          <a href="#" class="clear-a">更多&nbsp;&gt;</a>
        </h4>
        <ul class="clear-ul">
          <li>
            <a href="#" class="clear-a">
              <span>[特惠]</span>备战开学季 全民半价购数码
            </a>
          </li>
          <li>
            <a href="#" class="clear-a">
              <span>[公告]</span>双十一活动 众多商品特价购
            </a>
          </li>
          <li>
            <a href="#" class="clear-a">
              <span>[特价]</span>办理会员卡 享受折扣特价购
            </a>
          </li>
          <li>
            <a href="#" class="clear-a">
              <span>[抢购]</span>限时抢购中 进口商品发售中
            </a>
          </li>
          <li>
            <a href="#" class="clear-a">
              <span>[秒杀]</span>三分钟秒杀 演唱门票限时抢
            </a>
          </li>
        </ul>
      </div>
      <div class="aside-mid">
        <ul class="sprit clear-ul">
          <li id="hf">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>话费</span>
            </a>
          </li>
          <li id="jp">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>机票</span>
            </a>
          </li>
          <li id="dyp">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>电影票</span>
            </a>
          </li>
          <li id="yx">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>游戏</span>
            </a>
          </li>
          <li id="cp">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>彩票</span>
            </a>
          </li>
          <li id="jyz">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>加油站</span>
            </a>
          </li>
          <li id="jd">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>酒店</span>
            </a>
          </li>
          <li id="hcp">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>火车票</span>
            </a>
          </li>
          <li id="zc">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>众筹</span>
            </a>
          </li>
          <li id="lc">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>理财</span>
            </a>
          </li>
          <li id="lpk">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>礼品卡</span>
            </a>
          </li>
          <li id="bt">
            <a href="#" class="clear-a">
              <div class="sprit-img"></div>
              <span>白条</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="aside-but">
        <img src="./ad1.png" alt="秋潮男装" />
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "ContentMid",
  mounted(){
    this.getBanners();
  },
  computed: {
    ...mapState("home", ["banners"]),
  },
  methods: {
    ...mapActions("home", ["getBanners"]),
  },
  // data() {
  //   return {
  //     pics: [
  //       { url: require("./banner1.jpg") },
  //       { url: require("./banner2.jpg") },
  //       { url: require("./banner3.jpg") },
  //       { url: require("./banner4.jpg") },
  //     ],
  //   };
  // },
  components: {
  },
};
</script>
<style lang="less" scoped>
.car-run {
  width: 720px;
  margin-left: 215px;
  margin-right: 10px;
  margin-top: 3px;
  box-sizing: border-box;
  height: 100%;
  float: left;
}

.con {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}

.aside {
  width: 250px;
  height: 458px;
  font-size: 0px;
  // margin-left: 10px;
}
.aside-top {
  border: 1px solid #e4e4e4;
  margin-top: 5px;
  a:hover {
    color: #90ee90;
    text-decoration: underline;
  }
  h4 {
    margin: 5px 5px 0px 5px;
    padding: 5px 10px;
    border-bottom: 1px solid #e4e4e4;
    strong {
      text-align: left;
      font-size: 14px;
      line-height: 22px;
    }
    a {
      float: right;
      font-size: 12px;
      font-weight: 400;
      margin-top: 4px;
    }
  }
  ul {
    padding: 5px 15px;
    li {
      font-size: 12px;
      line-height: 26px;
      span {
        font-weight: bold;
      }
    }
  }
}

/* 右侧雪碧图菜单 */

.aside-mid {
  width: 250px;
  border-right: 1px solid #e4e4e4;
  box-sizing: border-box;
  ul li {
    display: inline-block;
    border-left: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    a {
      width: 61.25px;
      display: inline-block;
      span {
        width: 61px;
        height: 25px;
        display: inline-block;
        font-size: 12px;
        text-align: center;
        line-height: 25px;
      }
    }
    div {
      width: 61px;
      height: 40px;
      background-image: url(./icons.png);
    }
  }
}

#hf div {
  background-position: 0px -5px;
}

#jp div {
  background-position: -66px -5px;
}

#dyp div {
  background-position: -128px -5px;
}

#yx div {
  background-position: -190px -5px;
}

#cp div {
  background-position: -2px -78px;
}

#jyz div {
  background-position: -63px -78px;
}

#jd div {
  background-position: -127px -76px;
}

#hcp div {
  background-position: -190px -76px;
}

#zc div {
  background-position: -1px -147px;
}

#lc div {
  background-position: -64px -148px;
}

#lpk div {
  background-position: -126px -145px;
}

#bt div {
  background-position: -192px -147px;
}

/* 雪碧图下方图片 */

.aside-but {
  margin-top: 4px;
  opacity: 0.8;
  &:hover {
    opacity: 1;
    transition: opacity 0.5s linear 0s;
  }
}
</style>